<template>
	<view class="page">
		<u-swiper :list="swiper" keyName="image" :indicator="true" indicatorMode="dot" :circular="true"
			@click="gopath"></u-swiper>
		<view class="dis aic ul jcsa">
			<view class="li " @click="goCar">
				<image src="/static/image/shop01.png" mode="widthFix" class="icon"></image>
				<view class="icon_name">购物车</view>
			</view>
			<view class="li " @click="goList">
				<image src="/static/image/shop02.png" mode="widthFix" class="icon"></image>
				<view class="icon_name">商品订单</view>
			</view>
			<view class="li " @click="goRecord">
				<image src="/static/image/shop03.png" mode="widthFix" class="icon"></image>
				<view class="icon_name">积分订单</view>
			</view>
			<!-- <view class="li dis aic">
				<image src="/static/image/shop04.png" mode="widthFix" class="icon"></image>
				<view class="icon_name">团购订单</view>
			</view> -->
		</view>

		<view class="goods">
			<view class="good" v-for="(item,index) in tabList" :key="index" @click="goDetail(item)">
				<view class="image_box">
					<image :src="item.image" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="goods_detail">
					<view class="good_name">
						{{item.name}}
					</view>
					<view class="good_price">
						<text class="big">￥{{item.price}}</text>起
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		props: {

			swiper: {
				type: Array,
				default: () => {
					return []
				}
			},
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},


		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/goodsDetail?id=' + item.id
				})
			},
			goList() {
				uni.navigateTo({
					url: '/pages/shop/orderList'
				})
			},
			goCar() {

				uni.navigateTo({
					url: '/pages/shop/goodsCar'
				})

			},
			goRecord() {
				uni.navigateTo({
					url: '/pages/shop/exchangeRecords'
				})
			},
			// 点击轮播图
			gopath(e) {
				console.log('点击轮播图', this.swiper[e]);
				if (this.swiper[e].imageUrl) {
					window.open(this.swiper[e].imageUrl)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: rgb(245, 245, 245);
		min-height: calc(100vh - 150rpx - env(safe-area-inset-bottom));
		width: 750rpx;

		.ul {
			width: 690rpx;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			background: #fff;


			.li {
				.icon {
					width: 80rpx;
				}

				.icon_name {
					font-family: Inter, Inter;
					font-weight: 900;
					font-size: 20rpx;
					color: #000000;
					text-align: center;
				}
			}
		}

		.goods {
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx 20rpx;

			.good {
				width: 335rpx;
				background: #fff;
				border-radius: 12rpx;
				overflow: hidden;

				.image_box {
					width: 335rpx;
				}

				.goods_detail {
					background: #fff;
					padding: 22rpx 18rpx;
					box-sizing: border-box;

					.good_name {
						font-family: Noto Sans SC, Noto Sans SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						line-height: 30rpx;
					}

					.good_price {
						font-family: Noto Sans SC, Noto Sans SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #FF530A;
						margin-top: 12rpx;

						.big {
							font-size: 24rpx;
						}
					}
				}



			}
		}
	}
</style>